<template>
  <div class="project-list-wrapper">
    <!-- <div class="module-name">公司列表</div> -->
    <div class="search-bar">
      <el-form ref="formRef" size="mini" :model="filters" label-width="150px">
        <el-row :gutter="24" class="filters-row-box">
          <el-col :span="8">
            <el-form-item label="公司名称：">
              <el-input style="width: 80%" clearable placeholder="请输入" v-model.trim="filters.name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
            <el-button type="default" size="mini" @click="handleResent">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="details-layout">
      <el-table :data="projectList" stripe style="width: 100%" size="mini" row-key="id"
                :header-cell-style="{ background: 'rgba(117, 60, 202, 0.04)' }">
        <el-table-column align="center" prop="name" label="公司名称"></el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="pagination.pageNo" :page-sizes="[10, 20, 50]" :page-size="pagination.pageSize" :total="total"
                       layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>

import { mapActions } from 'vuex'

export default {
  name: 'company',

  data() {
    return {
      projectList: [],
      filters: {
        name: ''
      },
      pagination: {
        pageSize: 10,
        pageNo: 1
      },
      total: 0
    }
  },
  mounted() {
    this.getCompanyList()
  },

  methods: {
    ...mapActions('projectList', ['qryCompanyList']),

    // 查询受试者状态列表
    getCompanyList() {
      const params = {
        ...this.pagination,
        ...this.filters
      }
      this.qryCompanyList({ params }).then((res) => {
        const { data, code, message } = res
        if (code === 200) {
          this.projectList = data.records || []
          this.total = data.total || 0
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    // 分页pageSize change事件
    handleSizeChange(size) {
      this.pagination.pageSize = size
      this.getCompanyList()
    },

    // 分页 
    handleCurrentChange(index) {
      this.pagination.pageNo = index
      this.getCompanyList()
    },

    // 重置并重新查询列表
    handleResent() {
      this.filters = {
        name: ''
      }
      this.pagination.pageNo = 1
      this.getCompanyList()
    },

    // 查询操作
    handleSearch() {
      this.pagination.pageNo = 1
      this.getCompanyList()
    },
  },
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
